<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        a{
            text-decoration: none;

        }
        ul>li{
            list-style:none;
        }
        body{
            background-color: #f5f5f5;
        }
        .br-head{
            position: relative;
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            /* background-color: pink; */
            font-size: 14px;
            color: #333;
            
        }
        .br-head .header-log{
            display: block;
            width: 56px;
            height: 56px;
            /* background-color: orange; */
            float: left;
            margin-top: 22px;

        }
        .header-log img{
            float: left;
            width: 56px;
            height: 56px;
        }
        
        
        .br-head .header-nav{
            font-size: 16px;
            padding: 12px 0 0 30px;
            float: left;
        }
        .br-head .header-nav .box{
            width: 142px;
            height: 87px;
            padding-right: 15px;
            float: left;
        }
        .header-nav .text{
            padding: 28px 10px 38px;
            float: left;
        }
        .header-nav .link a{
            color: #333;
        }
        /* .header-nav .header-search{
            /* width: 296px;
            height: 50px;
            padding: 0 10px; */
            /* position: absolute;
            top: 25px;
            right: 0px; */
            /* float: right; */
            /* background-color: #fff; */
        /* } */ */
        .header-search .search{
            /* background: url(imgs/search.png) no-repeat 0 0; */
            display: block;
            width: 47px;
            height: 47px;
            padding:1px 6px ;
            border: 1px solid #e0e0e0;
            position: absolute;
            right: 0;
            top: 24.5px;
           
           

        }
        .header-search .sty{
            position: absolute;
            right: 60px;
            top: 24.5px;
            width: 223px;
            height: 49px;
            padding: 0 10px ;
            border: 1px solid #e0e0e0;
        }
        .header-search .search img{
            /* background: url(imgs/search.png) no-repeat 0 0; */
            display: block;
            width: 47px;
            height: 47px;
            padding:1px 6px ;
            border: 1px solid #e0e0e0;
            position: absolute;
            right: 0;
            top: 24.5px;
           background-color: #fff;
           

        }
        .body-top {
            width: 1226px;
            height: 460px;
            /* background-color: pink; */
            margin: 0 auto;
            position: relative;
        }
        .body-top .imge{
            width: 1226;
            height: 460px;
           float: left;
        }
        .body-top .bg-left{
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -34.5px;
            float: left;
            width: 41px;
            height: 69px;
            background: url(imgs/arr.png) no-repeat -124px 0 ;

        }
        .body-top .bg-left:hover{
            background-position: -42px 0;
        }
        .body-top .bg-right{
            position: absolute;
            left: 234px;
            top: 50%;
            margin-top: -34.5px;
            float: left;
            width: 41px;
            height: 69px;
            background: url(imgs/arr.png) no-repeat -83px 0;
        }
        .body-top .bg-right:hover{
            background-position:  0 0;
        }
        .bg-dot{
            position: absolute;
            right: 30px;
            bottom: 20px;
        }
        .body-top .bg-dot span{
            /* position: absolute;
            right: 40px;
            bottom: 20px; */
            float: left;
            width: 6px;
            height: 6px;
            border: 2px solid hsla(0,0%,100%,.3);
            background-color: rgba(0,0,0,.4);
            border-radius: 50%;
            margin: 0 4px;
        }
        .body-top .bg-dot span:hover{
            border-color: rgba(0,0,0,.4);
            background-color:hsla(0,0%,100%,.3);
        }
        .body-top-item{
            position: absolute;
            left: 0;
            top: 0;
            width: 234px;
            height: 420px;
            color: #fff;
            /* float: left; */
           background-color:rgba(105,101,101,.6);
            padding: 20px 0;
        }
        .body-top-item li{
            line-height: 42px;
            padding-left: 30px;
            cursor: pointer;
        }
        .body-top-item li:hover{
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div class="banner">
        <div class="br-head">
            <div class="header-log">
                <a href=""><img src="imgs/_20211120143118.png" alt=""></a>
            </div>
            <div class="header-nav">
                <li class="link">
                    <div class="box"></div>
                    
                    <a href=""><sapn class="text">Xiaomi手机</sapn></a>
                    <a href=""><sapn class="text">Redmi红米</sapn></a>
                    <a href=""><sapn class="text">电视</sapn></a>
                    <a href=""><sapn class="text">笔记本</sapn></a>
                    <a href=""><span class="text">平板</span></a>
                    <a href=""><span class="text">家电</span></a>
                    <a href=""><span class="text">路由器</span></a>
                    <a href=""><span class="text">服务</span></a>
                    <a href=""><span class="text">社区</span></a>
                </li>
                <div class="header-search">
                    <input type="text" class="sty" placeholder="小米">
                    <div class="search">
                        <img src="imgs/search.png" alt="">  
                    </div>
                </div>
            </div>
            <div class="header-search">
                
            </div>
        </div>
        <div class="br-body">
            <div class="body-top">
                <div class="bg-picture">
                    <img class="imge" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1837&h=689&f=webp&q=90" alt="">
                    <div class="bg-left">

                    </div>
                    <div class="bg-right">

                    </div>
                    <div class="bg-dot">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    
                </div>
                <div class="body-top-item">
                    <ul>
                        <li>手机</li>
                        <li>电视</li>
                        <li>笔记本 平板</li>
                        <li>家电</li>
                        <li>出行 穿戴</li>
                        <li>智能 路由器</li>
                        <li>电源配件</li>
                        <li>健康 儿童</li>
                        <li>耳机 音响</li>
                        <li>生活 箱包</li>
                    </ul>
                </div>
            </div>
            <div class="body-bottom">

            </div>
        </div>
        <div class="br-bottom">

        </div>
    </div>
</body>
</html>